<template>
    <div class="page-rebate-index">
        <div class="header white-color">
            <div class="inner" v-if="userBasicInfo && userBasicInfo.avatar">
                <div class="left">
                    <div class="avatar">
                        <img class="border-round" :src="userBasicInfo.avatar" mode="aspectFill" />
                    </div>
                    <div class="info user-info white-color">
                        <div class="name text-huge">{{userBasicInfo.nickname ? userBasicInfo.nickname : ''}}</div>
                        <div class="level text-normal">{{levalList[userBasicInfo.level]}}</div>
                    </div>
                </div>
                <div class="info unlock">
                    <span>
                        <span class="text-banner">{{accountCurrency ? accountCurrency : 0}}</span>
                        <span v-if="account > 1000000" class="tips">万</span>
                        <span v-else class="tips">元</span>
                    </span>
                    <!-- <span class="text-banner">{{accountCurrency}}元</span> -->
                    <span class="text-normal">待提现</span>
                </div>
            </div>
        </div>
        <div class="banner" v-if="rebateDetail">
            <div class="visitor clearfix">
                <div class="col col-4">
                    <div>
                        <span class="number">{{rebateDetailCurrency.lock}}</span>
                        <span v-if="rebateDetail.lock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">锁定金额</div>
                </div>
                <div class="col col-4">
                    <div>
                        <span class="number">{{rebateDetailCurrency.unlock}}</span>
                        <span v-if="rebateDetail.unlock > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">解锁金额</div>
                </div>
                <div class="col col-4">
                    <div>
                        <span class="number">{{rebateDetailCurrency.rebate}}</span>
                        <span v-if="rebateDetail.rebate > 1000000" class="tips">万</span>
                    </div>
                    <div class="tips">分销金额</div>
                </div>
            </div>
            <div class="visitor clearfix">
                <div class="col col-4">
                    <div class="number">{{rebateDetailCurrency.invite}}</div>
                    <div class="tips">邀请记录</div>
                </div>
                <div class="col col-4">
                    <div class="number">{{rebateDetailCurrency.no_deal}}</div>
                    <div class="tips">还未成交</div>
                </div>
                <div class="col col-4">
                    <div class="number">{{rebateDetailCurrency.deal}}</div>
                    <div class="tips">成交人数</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    currency,
    placeholderImg,
} from '@/lib/utils';
import CommonNav from '@/components/nav/commonNav.vue';
import ListEmpty from '@/components/list/listEmpty.vue';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'RebateDetail',
    components: {
        CommonNav,
        ListEmpty,
    },
})
export default class RebateDetail extends Vue {
    public id: any = null;
    public placeholderImg: any = placeholderImg;

    public levalList: string[] = [
        '会员',
        '老顾客',
        '城市合伙人',
    ];

    /** 用户基础信息 */
    public get userInfo() {
        return store.state.utils.userInfo;
    }

    public get accountMap() {
        return store.state.partner.accountMap;
    }

    public get rebateDetailMap() {
        return store.state.partner.rebateDetailMap;
    }

    public get rebateDetail() {
        return this.rebateDetailMap[this.id] || null;
    }

    public get account() {
        return this.accountMap[this.id] || 0;
    }

    public get userBasicInfo() {
        return this.userInfo ? this.userInfo[this.id] : {};
    }

    public get accountCurrency() {
        return this.account ? (this.account > 1000000 ? currency(this.account / 10000) : currency(this.account)) : 0;
        // return this.account ? currency(this.account) : 0;
    }

    public get rebateDetailCurrency() {
        return this.rebateDetail ? Object.assign(this.rebateDetail, {
            lock: (this.rebateDetail.lock > 1000000 ? currency(this.rebateDetail.lock / 10000) : currency(this.rebateDetail.lock)),
            unlock: (this.rebateDetail.unlock > 1000000 ? currency(this.rebateDetail.unlock / 10000) : currency(this.rebateDetail.unlock)),
            rebate: (this.rebateDetail.rebate > 1000000 ? currency(this.rebateDetail.rebate / 10000) : currency(this.rebateDetail.rebate)),
        }) : null;
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-rebate-index {
    overflow-x: hidden;
    padding-bottom: 64px;
    .header {
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
        width: 848px;
        height: 232px;
        padding-left: 518rpx;
        padding-bottom: 60rpx;
        margin-left: -848rpx + 375rpx;
        margin-top: -240rpx;
        background-color: @color-red;
        border-radius: 0 0 50% 50%;
        .inner {
            display: flex;
            justify-content: space-between;
            width: 660rpx;
        }
        .left {
            display: flex;
        }
        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .user-info {
            width: 270rpx;
        }
        .unlock {
            // margin-left: 40rpx;
            .text-banner {
                line-height: 78rpx;
            }
        }
        .avatar {
            width: 60px;
            height: 60px;
            margin-right: 10px;
            image {
                width: 100%;
                height: 100%;
            }
        }
    }
    .banner {
        padding: 26rpx;
        .visitor {
            padding: 24rpx 0rpx;
            margin: 10px 0;
            box-sizing: border-box;
            text-align: center;
            background-color: #f8f8f8;
            border-radius: 10rpx;
            color: @color-red;
            .number {
                padding: 0;
                line-height: 42px;
                font-size: 36px;
                font-weight: bold;
            }
            .tips {
                font-size: 14px;
            }
        }
        .account-detail {
            .title {
                padding: 10px;
            }
            background-color: #f8f8f8;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                &:not(:last-child) {
                    border-bottom: 2rpx solid #ebebeb;
                }
                .inner-box {
                    display: flex;
                    align-items: center;
                }
                .avatar {
                    width: 60px;
                    height: 60px;
                    margin-right: 10px;
                }
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}

</style>
